<template>
  <section class="wrapper" style="overflow:auto">
    <ul
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="list"
    >
      <li
        v-for="item in farmList"
        :key="item.base_id"
        class="list-item"
      >
        <div class="info">
          <div class="text">
            <div class="name" @click="openDialog(item.name, item.base_id, item.coordinate_X, item.coordinate_Y)">{{ item.name }}</div>
            <div class="address">{{ item.address }}</div>
          </div>
          <el-image
            class="img"
            :src="item.base_image_url"
            :lazy="true"
            :preview-src-list="[item.base_image_url]"
          />
        </div>
      </li>
    </ul>
    <p v-show="!loading" class="warn">{{ warn }}</p>
    <farm-dialog
      :name="name"
      :lat-lng="latLng"
      :service-list="serviceList"
      :comment="comment"
      :dialog-visible="dialogVisible"
      @close-dialog="closeDialog"
    />
  </section>
</template>

<script>
import { getYTFarm, getYTBaseData } from '@/api/ytbuyer'
import FarmDialog from './FarmDialog'

export default {
  name: 'FarmList',
  components: {
    FarmDialog
  },
  props: {
    searchKey: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      farmList: [],
      farmListData: [],
      loading: false,
      warn: '没有更多农场了！',
      name: '',
      id: null,
      latLng: [],
      serviceList: [],
      comment: '',
      dialogVisible: false
    }
  },
  watch: {
    searchKey(newValue) {
      this.searchFarm(newValue)
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getYTFarm()
    },
    getYTFarm() {
      this.loading = true
      getYTFarm({
        method: 'getCityInfo',
        prov: '全国'
      })
        .then(response => {
          const list = response.cityList
          for (const key in list) {
            this.farmList.push(...list[key])
          }
          this.farmListData = this.farmList
          this.loading = false
        })
        .catch(error => {
          console.log(error)
        })
    },
    openDialog(name, id, lat, lng) {
      this.dialogVisible = true
      this.id = id
      this.name = name
      this.latLng = [lat, lng]
      this.getServiceList()
      this.getBaseComment()
    },
    closeDialog() {
      this.serviceList = []
      this.comment = ''
      this.dialogVisible = false
    },
    getServiceList() {
      getYTBaseData({
        method: 'source',
        flag: 'serviceList',
        baseId: this.id
      })
        .then(response => {
          this.serviceList = response.serviceList
        })
        .catch(error => {
          console.log(error)
        })
    },
    getBaseComment() {
      getYTBaseData({
        method: 'source',
        flag: 'base_comment',
        baseId: this.id
      })
        .then(response => {
          this.comment = response.base_comment.expertComment
        })
        .catch(error => {
          console.log(error)
        })
    },
    searchFarm(sk) {
      this.loading = true
      const list = this.farmListData.filter(item => {
        return item.name.indexOf(sk) !== -1 || item.address.indexOf(sk) !== -1 || item.name_cn.indexOf(sk) !== -1 || item.district_cn.indexOf(sk) !== -1
      })
      if (list.length === 0) {
        this.warn = '抱歉，没有搜索到相应农场！'
      } else {
        this.warn = '没有更多农场了！'
      }
      this.farmList = list
      // this.$nextTick(function() {
      //   this.farmList = list
      // })
      this.loading = false
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  .list {
    list-style: none;
    width:65%;
    margin-left:auto;
    margin-right:auto;
    margin-top:90px;
    padding-left:0;
    .list-item {
      padding:10px 0;
      border-bottom: 1px solid rgb(235,235,235);
      .info {
        display:flex;
        justify-content: space-between;
        .text {
          .name {
            display:inline-block;
            font-size:20px;
            margin-bottom:10px;
            cursor:pointer;
          }
          .name:hover {
            color:#409EFF;
          }
          .address {
            font-size:15px;
          }
        }
        .img {
          width:100px;
          height:80px;
          border-radius:5px;
          box-shadow: 0 2px 5px 0 rgb(195,195,195);
        }
      }
    }
  }
  .warn {
    color:#aaa;
    text-align:center;
  }
}

</style>
